<template>
  <section class="home">
    <header v-show="headerAndControlVisible">
      <img src="../../assets/img/title.png" @click="handleClickInit">
      <div>
        <Nav ref="nav" />
        <HeadClock />
      </div>
    </header>
    <CommunityManagement v-if="currentNav=='社区管理' && communityData" />
    <ShantyTownRemake v-if="currentNav=='棚屋改造' && reBuildData" />
    <Tree v-show="headerAndControlVisible" :position="(currentNav && !sceneBtnVisible)?{right:470+'px'}:{right:20+'px'}" />
    <OptControl v-show="headerAndControlVisible" :position="(currentNav && !sceneBtnVisible)?{right:470+'px'}:{right:20+'px'}" />
    <SceneBtn ref="sceneBtn" @sceneBack="handleClickSceneBack" v-if="currentNav=='社区管理' && sceneBtnVisible" />
    <transition name="scene">
      <SceneIframe v-if="sceneIframeVisible" />
     </transition>
    <transition name="scene">
      <SceneSummary v-if="sceneSummaryVisible" />
     </transition>
    <iframe id="3dcharts" src="http://1.119.137.18:32006/libs/resafety/ppapi/3dMap.jsp" frameborder="0"></iframe>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import mapService from '@src/utils/mapService'
import HeadClock from '@src/components/clock.vue'
import Nav from '@src/components/nav.vue'
import OptControl from '@src/components/opt-control.vue'
import SceneBtn from '@src/views/Home/scene/scene-btn.vue'
import SceneIframe from '@src/views/Home/scene/scene-iframe.vue'
import SceneSummary from '@src/views/Home/scene/scene-summary.vue'
import Tree from '@src/components/tree.vue'
import CommunityManagement from './community-management/index.vue'
import ShantyTownRemake from './shanty-town-remake/index.vue'
export default {
    name: 'Home',
    components:{
      HeadClock,
      Nav,
      CommunityManagement,
      ShantyTownRemake,
      OptControl,
      SceneBtn,
      SceneIframe,
      SceneSummary,
      Tree
    },
    data () {
      return {
      }
    },
    computed: {
      ...mapGetters(['currentNav','communityData','reBuildData','headerAndControlVisible','sceneBtnVisible','sceneIframeVisible','sceneSummaryVisible']),
    },
    created(){
      // const that =this;
      // // window.get3dMapStatus=this.get3dMapStatus;
      // mapService.get3dMapStatus=function(){
      //   that.headerAndControlVisible=true;
      // }
    },
    methods: {
      handleClickInit(){
        this.$refs.nav.toFlyPosition();
        this.$refs.nav.init();
        this.$store.commit('home/SET_CURRENTNAV','');
      },
      handleClickSceneBack(){
        this.$refs.nav.drawSubjectCorral('A0000011',true);
        this.$refs.nav.queryCommunitySubjectAOIShapeData('A0000011');
        // 演示点位加载
        this.$refs.nav.toDrawPointer({
          x:114.22875224,
          y:22.55303648,
          z:-9999,
          effect_id:'scene-id',
          path:'sf_pic//safe.png',
          cbName:'cb_sceneEvent',
          width:49,
          height:56
        });
      }
    },
}
</script>
<style scoped lang="less">
  .home{
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    & header{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 72px;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #0A122B;
      opacity: 0.85;
      & >img{
        width: 361px;
        height: 36px;
        cursor: pointer;
      }
      &>div{
        display: flex;
      }
      // & .title{
      //   position: absolute;
      //   background: linear-gradient(to right,#03DCEF,#307FFF);
      //   -webkit-background-clip:text;
      //   color: transparent;
      //   font-size: 60px;
      //   letter-spacing: 3.33px;
      //   top: 41px;
      //   left: 90px;
      //   font-weight: 700;
      // }
    }
    & iframe{
      width: 100%;
      height: 100%;
      border:none;
      // background: rgb(42,50,62);
    }
    
    /* 给过渡的scene加样式 */
    .scene-leave-active,
    .scene-enter-active {
      transition: all .1s;
    }
    .scene-leave-active,
    .scene-enter {
      width: 0px !important;
      opacity: 0;
    }
    .scene-leave,
    .scene-enter-active {
      // width: 1380px;
      // height: 700px;
      
      // opacity: 0;
    }
  }
</style>

